<template>
	<i-card @click="goTo" top="20rpx" padding="32rpx 24rpx">
		<view class="i-oilItem">
			<view class="oilItem_left">
				<view class="view">
					<image :src='data.stationPic'></image>
				</view>
				<view class="left_name">
					<text class="left_title">{{data.stationName}}</text>
					<view class="left_cent">
						<text class="left_map">{{data.location}}</text>
						<view class="oilItem_rigth" @click.stop="select">
							<image src="../../static/images/navigation_icon.png"></image>
							{{data.distance}}km
						</view>
					</view>
					<view class="left_price">
						<view class="left_price_item">
							<text style="font-size: 26rpx;">¥</text>
							<text style="margin-bottom: -8rpx;">{{data.price}}</text>
							<text style="font-size: 26rpx;">/L</text>
						</view>
					</view>
					<view v-if="data.discount" class="lose_price">已降￥{{data.discount}}</view>
				</view>
			</view>
		</view>
	</i-card>
</template>

<script lang="ts" setup>
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		} as any
	})

	const emit = defineEmits(['click', 'handleMap'])
	const goTo = () => {
		emit('click')
	}
	const select = () => {
		emit('handleMap')
	}
</script>

<style lang="scss" scoped>
	.i-oilItem {
		background-color: #fff;
		@include flexRS;
		width: 100%;
		// border-radius: 16rpx;

		.oilItem_left {
			width: 100%;
			@include flexR;
			align-items: flex-start;

			.view {
				width: 120rpx;
				height: 120rpx;
				margin-right: 24rpx;
				border-radius: 8rpx;
				background-color: #E6E6F0;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}
			}

			.left_name {
				@include flexC;
				width: 80%;
				overflow: hidden;

				.left_title {
					@include dfont(32rpx);
					font-weight: bold;
					margin-bottom: 12rpx;
					@include overflow;
				}

				.left_cent {
					width: 100%;
					@include flexRS;
					margin-bottom: 12rpx;
				}

				.left_map {
					width: 75%;
					@include dfont(24rpx);
					color: #A0A0AD;
					@include overflow;
				}

				.left_price {
					@include dfont(48rpx);
					@include flexR;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
			
					.left_price_item {
						@include flexR;
						align-items: flex-end;
					}
				}
			}

			.lose_price {
				margin-top: 10rpx;
				width: 140rpx;
				height: 36rpx;
				background: linear-gradient(315deg, #FB574B 0%, #F57F31 100%);
				border-radius: 16rpx 4rpx 16rpx 4rpx;
				@include titlefont(24rpx);
				@include flexRC;
				color: #fff;
			}
		}

		.oilItem_rigth {
			width: 26%;
			@include flexR;
			@include dfont(24rpx);
			color: #A0A0AD;

			image {
				margin-right: 8rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

	}
</style>